<template>
  <div class="container">
      <div class="header">
        <img :src="headImg" class="headImg"/>
        <div class="headDetails">
          <span class="nickName">{{nickname}}</span>
          <span class="sign">{{sign}}</span>
        </div>
        <div class="headMore" @click="to('reset')">修改个人资料<img src="http://file.rzkeji.com/web/daka/icon/icon-change-userinfo.png"/></div>
      </div>
      <div class="nav">
        <ul>
          <li class="xunzhuang" @click="to('xun')">
            <img src="http://file.rzkeji.com/web/daka/icon/icon-xunzhuang.png"/>
            <span>勋章排名</span>
          </li>
          <li class="message" @click="to('message')">
            <img src="http://file.rzkeji.com/web/daka/icon/icon-message.png"/>
            <span>消息中心</span>
          </li>
          <li @click="to('yjfk')">
            <img src="http://file.rzkeji.com/web/daka/icon/icon-yjfk.png"/>
            <span>意见反馈</span>
          </li>
        </ul>
      </div>
      <div class="content" v-show="length == '0' ? false : true">
         <ul v-for="(value,key,index) in arrangementData" >
           <div class="content_tag">
             <img src="http://file.rzkeji.com/web/daka/icon/icon-jiedian.png"/>
             <span>&nbsp&nbsp&nbsp{{key}}</span>
           </div>
           <li v-for="(value1,index1) in value">
             <div class="content_top">{{value1.title}}</div>
             <div class="content_bottom">
               <img :src="value1.img"/>
               <span>{{value1.comment}}</span>
             </div>
           </li>
         </ul>
      </div>
      <div class="noneDetail" v-show="length == '0' ? true : false">
           <span>暂无打卡信息</span>
           <div> 
             <span>快去发布打卡信息</span>
             <navigator url="../index/main" class="to">,去打卡列表</navigator>
           </div>
      </div>

      <navigator url="/pages/classSelect/main" hover-class="navigator-hover" class="returnIndex"><img src="http://file.rzkeji.com/web/daka/icon/home2.png"/></navigator>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data:"",
      show:false,
      headImg:"",
      nickname:"",
      sign:"",
      arrangementData:"",
      length:""
  }
 },
    computed:{
        information(){
            return this.$store.state.information;
        }
    },
  methods: {
     to(value){
      if(value=="xun")
        {
          wx.navigateTo({
            url:'../rankings/main'
          })
        }else if(value=="message")
        {
          wx.navigateTo({
            url:'../news/main'
           })
        }else if(value=='reset'){
           wx.navigateTo({
            url:'../information/main'
           })
        }else{
           wx.navigateTo({
            url:'../release/main?type=yjfk'
           })
        }
     },
     dateFormat(value){   //这里是把日期转化成YYYY-MM-DD  //这里传入的日期是new Date()后的
      var todayMonth=value.getMonth() +1<10 ? "0" +(value.getMonth()+1) : (value.getMonth()+1);
      var todayDay=value.getDate() <10 ? "0"+value.getDate() : value.getDate();
      var today=value.getFullYear()+"-"+todayMonth+"-"+todayDay;
      return today;
     },
     arrangementData1(){
      var _this=this;
      var data2={};
      var date=new Date();
      //这里是把今天的日期转化成YYYY-MM-DD
      var today=_this.dateFormat(date)
      for(var i=0;i<_this.data.length;i++)
      {
        //这里是把后台传过来的日期转化成YYYY-MM-DD
          var reg = /-/g;
        var old=_this.dateFormat(new Date(_this.data[i].created_at.replace(reg,"/")))
        //作比较，如果传过来的数据日期是今天的日期，就把数据转化成今天
        if(new Date(today).getTime() == new Date(old).getTime())
        {
         old="今天"
        }
        if(old in data2)   //判断当前的对象里面是否含有这个属性
          {   //如果含有就把数据push进去当前的属性的数组里面
            data2[old].push({
             comment:_this.data[i].daka_content.title,
              img:_this.data[i].daka_content.img_url,
              title:_this.data[i].content
            })
          }else{
            //如果不含有则新增一个属性并且赋值
            data2[old]=[{
            comment:_this.data[i].daka_content.title,
              img:_this.data[i].daka_content.img_url,
             title:_this.data[i].content
          }]
         }
      };
      console.log(data2);
      return data2;
    },
    getHsonLength(json){   //获取json对象的长度
        var jsonLength=0;
        for (var i in json) {
            jsonLength++;
        }
        return jsonLength;
    }
  },
  onShow(){
    var _this=this;



    var userToken=wx.getStorageSync('userToken')
     wx.request({
      url:'https://daka.rzkeji.com/api/ucenter/get-userinfo',
      header: {
      'content-type': 'application/json' // 默认值
      },
      data:{
      daka_token:userToken
      },
      methods:'GET',
      success(res){
        var res=res.data.data;
        _this.sign=res.description;
        _this.headImg=res.photo_url;
        _this.nickname=res.nickname;
        _this.information.headImg=res.photo_url;
        _this.information.returnId=res.photo_id;
        _this.information.nickname=res.nickname;
        _this.information.weChatNumber=res.wechat;
        _this.information.sign=res.description;
        _this.information.birthDate=res.birthday != "0000-00-00 00:00:00" && res.birthday != null ? _this.dateFormat(new Date(res.birthday)) : _this.dateFormat(new Date());
        _this.information.index=(res.sex-1);
        for(var i in _this.information)
        {
          if(_this.information[i]==null)
          {
            _this.information[i]="";
          }
        }
        _this.$store.dispatch('setInformation',_this.information);
      }
     })
    
    var userToken=wx.getStorageSync('userToken');
    wx.request({
      url:"https://daka.rzkeji.com/api/ucenter/get-my-daka-list",
      methods:'get',
      data:{
        daka_token:userToken
      },
      header: {
      'content-type': 'application/json' // 默认值
      },
      success(res){
          console.log(res);
        _this.data=res.data.data;
        _this.arrangementData=_this.arrangementData1();
        _this.length= _this.getHsonLength(_this.arrangementData)
      }
    })
  }
}
</script>
<style scoped>
.container{width: 100%;height: 100%;}
.header{width: 100%;height: 105px;display: flex;justify-content: row;color: white;background: #3a383f;}
.headImg{width: 60px;height: 60px;margin-left: 2%;margin-top: 26px;border-radius: 60px;}
.headDetails{width: 180px;height: 60px;margin-left: 10px;margin-top: 26px;}
.nickName{width: 100%;height: 30px;line-height: 30px;display: block;}
.sign{width: 100%;height: 30px;line-height: 30px;display: block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.headMore{width: 115px;height:51px;margin-top: 32px;font-size: 14px;margin-left: 10px;line-height: 51px;}
.headMore img{width: 15px;height: 15px;vertical-align: middle;}
.nav{width: 100%;height: 100px;border:1px solid gray;border-top:0;box-sizing:border-box;}
.nav ul{width: 100%;height: 100%;display: flex;justify-content: row}
.nav ul li{width: 30%;height: 100px;margin-left: 5%;text-align:center;}
.nav ul li img{width: 44px;height: 44px;margin-top: 10px;vertical-align:bottom}
.nav ul li.xunzhuang img{width: 62px;height: 44px;}
.nav ul li span{width: 100%;height: 30px;display: block;font-size: 15px;text-align: center;line-height: 30px;}
.content{width: 90%;border-left:2px solid gray;margin-left: 10%;padding-bottom: 10px;min-height: 353px;}
.content ul{width: 100%;border-radius: 5px;margin-top: 30px;}
.content_tag{width: 200px;height: 30px;margin-left: -10px;font-size: 14px;}
.content_tag img{width: 20px;height: 20px;margin-top: -5px;}
.content ul li{width:300px;height:100px;margin-left: 10px;border:1px solid gray;margin-bottom: 10px;border-radius: 10px}
.content_top{width: 100%;line-height: 30px;margin-left: 15px;}
.content_bottom{width: 100%;display: flex;justify-content: row;margin-top: 10px;padding-bottom: 10px;height:100px;}
.content_bottom img{width: 50px;height:50px;display: block;margin-left: 10px;margin-right: 10px;}
.content_bottom span{width: 220px;line-height: 25px;font-size: 15px;height: 50px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

.noneDetail{width: 100%;height: 1px;text-align: center;padding:100px 0;}
.noneDetail div{width: 100%;height: 30px;display: flex;justify-content: center }
.noneDetail span:nth-of-type(1){width: 100%;height: 30px;display: block;}
.noneDetail div span{height: 30px;display: block;width: 40%;line-height: 30px;}
.to{height: 30px;line-height: 30px;color:red;}
.navigator-hover {color:blue;}
.returnIndex{position: fixed;right: 20px;bottom: 60px;width: 40px;height: 40px;line-height: 30px;}
.returnIndex img{width:40px;height: 40px; }
</style>
